<template>
  <div class="item" v-if="step" ref="container">
      <van-sticky :container="container" offset-top="70">
        <p class="step">步骤{{step.position}}/{{length}}</p>
      </van-sticky>

      <van-image
       :src="step.image"
       class="img"
       radius="10px"
       @click="$parent.show = true"
       />
      <!-- <p class="text">{{step.content}}</p> -->
      <div v-html="text" class="text"></div>
  </div>
</template>

<script>
export default {
  props:["step","length"],
  data() {
    return {
      container: null,
      text: this.step.content.replaceAll("\n","<br/>"),
    };
  },
  mounted() {
    this.container = this.$refs.container;
  },

}
</script>

<style lang="less">
.item{
    .step{
        font-size: 15px;
        font-weight: 600;
        padding: 15px;
        padding-bottom: 10px;
        background-color: white;
    }
    .img{
        padding: 0 15px;
        .van-image__img{
            border-radius: 10px;
        }
    }
    .text{
        margin-top: 5px;
        padding: 0 15px;
        line-height: 30px;
    }
}
</style>